import styles from "@/styles/Layout.module.css";
import Link from "next/link";
import DatabaseIcon from "@/assets/Database.svg";
import FolderIcon from "@/assets/Folder_send.svg";
import ChartIcon from "@/assets/Chart_alt.svg";
import Logo from "@/assets/logo.svg";
import DataEngine from "@/assets/DataEngine.svg";
import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
import localFont from "next/font/local";

const titleFont = localFont({ src: "../assets/三极力量酷黑 超粗.ttf" });

const menuItems = [
  {
    id: 1,
    text: "样本集管理",
    icon: DatabaseIcon,
    target: "/data-manage",
  },
  {
    id: 2,
    text: "训练集生成",
    icon: FolderIcon,
    target: "/train-set",
  },
  {
    id: 3,
    text: "算法测试",
    icon: ChartIcon,
    target: "/validation",
  },
];

type Props = {
  children: JSX.Element;
};

export default function Layout({ children }: Props) {
  const router = useRouter();
  const [curMenu, setCurMenu] = useState(1);
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const it = setInterval(() => {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const date = now.getDate();
      const hour = now.getHours().toString().padStart(2, "0");
      const min = now.getMinutes().toString().padStart(2, "0");
      const sec = now.getSeconds().toString().padStart(2, "0");
      ref.current!.textContent = `${year}年${month}月${date}日 ${hour}:${min}:${sec}`;
    }, 1000);
    return () => {
      clearInterval(it);
    };
  }, []);
  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <div
          className={styles.logo}
          onClick={() => {
            router.reload();
          }}
        >
          <Image alt="" width="36" height="36" src={Logo}></Image>
          <Image
            alt=""
            width="140"
            style={{ aspectRatio: 5.4 }}
            src={DataEngine}
          ></Image>
        </div>
        <div className={`${styles.title} ${titleFont.className}`}>
          样本工程一体化系统
        </div>
        <div ref={ref} className={styles.tools}></div>
      </header>
      <div className={styles.container}>
        <aside className={styles.aside}>
          <div className={styles.menu}>
            {menuItems.map((item) => {
              return (
                <Link
                  key={item.id}
                  className={`${styles.menuItem} ${
                    item.id === curMenu ? styles.active : ""
                  } `}
                  href={item.target}
                  onClick={() => setCurMenu(item.id)}
                >
                  <Image alt="" src={item.icon}></Image>
                  {item.text}
                </Link>
              );
            })}
          </div>
        </aside>
        <main className={styles.main}>{children}</main>
      </div>
    </div>
  );
}
